import { Layout, Menu, Breadcrumb, Dropdown, Form, Descriptions } from 'antd';
import { Link } from 'react-router-dom';
import React, { useState } from 'react';
import {
  Table,
  Radio,
  Divider,
  Space,
  Input,
  DatePicker,
  Select,
  Button,
  Tabs,
  message,
  Modal,
} from 'antd';
import ReactDOM from 'react-dom';
import request from '@/http';
import { history } from '@/.umi/core/history';
import All_style from '../../index.less';
import style from './index.less';

const { RangePicker } = DatePicker;
const { TabPane } = Tabs;
const { Option } = Select;

interface DataType {
  key: React.Key;
  classEnd: string;
  classId: number;
  className: string;
  collegeName: string;
  gradeName: string;
  majorName: string;
  studentTotal: string;
  teacherName: string;
}
const rowSelection = {
  onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      'selectedRows: ',
      selectedRows,
    );
  },
  // getCheckboxProps: (record: DataType) => ({
  //   disabled: record.name === 'Disabled User', // Column configuration not to be checked
  //   name: record.name,
  // }),
};

const AllStudents = (porps: any) => {
  const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>(
    'checkbox',
  );
  const columns = [
    {
      title: '院系',
      dataIndex: 'collegesName',
      key: 'collegesName',
    },
    {
      title: '专业',
      dataIndex: 'majorName',
      key: 'majorName',
    },
    {
      title: '年级',
      dataIndex: 'yearName',
      key: 'yearName',
    },
    {
      title: '班级',
      dataIndex: 'className',
      key: 'className',
    },
    {
      title: '班主任',
      dataIndex: 'teacherName',
      key: 'teacherName',
    },
    {
      title: '学员姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '学号',
      dataIndex: 'userNo',
      key: 'userNo',
    },
    {
      title: '身份证号码',
      dataIndex: 'idNo',
      key: 'idNo',
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
      render: (text: any, row: any) => {
        return row.sex === '1' ? '男' : row.sex == '0' ? '女' : '';
      },
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: '手机号',
      dataIndex: 'mobileNo',
      key: 'mobileNo',
    },
    {
      title: '项目角色',
      dataIndex: 'position',
      key: 'position',
      render: (text: any, row: any) => {
        return row.position == '1'
          ? '前端开发'
          : row.position == '2'
          ? '测试'
          : row.position == '3'
          ? '后端开发'
          : row.position == '4'
          ? '项目经理'
          : row.position == '5'
          ? '产品经理'
          : row.position == '6'
          ? 'UI'
          : '';
      },
    },

    {
      title: '操作',
      key: 'active',
      render: (row: any) => {
        return row.id ? (
          <>
            <Button
              type="link"
              onClick={() => {
                console.log(row);
                showModal1(row);
              }}
            >
              编辑
            </Button>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <Button
              type="link"
              onClick={() => {
                if (confirm('确认要删除？')) {
                  console.log(row.studentId);
                  delStudent(row.studentId);
                }
              }}
            >
              删除
            </Button>
          </>
        ) : (
          ''
        );
      },
    },
  ];
  //删除
  const delStudent = async (studentId: any) => {
    const delRe: any = await request.post('/class/deleteStudetent', {
      stuentId: studentId,
      id: porps.location.state.row.id,
    });
    if (delRe.code == '200') {
      message.success(delRe.message);
    } else {
      message.error(delRe.message); //弹出错误信息
      loadData(null, 1, pagination.pageSize).finally();
    }
    loadData(null, 1, pagination.pageSize).finally();
  };

  const [change, setChange] = React.useState({
    className: '',
    collegesName: '',
    email: '',
    id: '',
    idNo: '',
    majorName: '',
    mobileNo: '',
    name: '',
    position: '',
    sex: '',
    studentId: '',
    teacherName: '',
    userNo: '',
    yearName: '',
  });

  //弹框(新增学生)
  const [visible, setVisible] = React.useState<any>();
  const [update,setUpdate] = React.useState<any>({
    className: '',
    collegesName: '',
    email: '',
    id: '',
    idNo: '',
    majorName: '',
    mobileNo: '',
    name: '',
    position: '',
    sex: '',
    studentId: '',
    teacherName: '',
    userNo: '',
    yearName: '',
  });
  const [addStudent] = Form.useForm(); //获取新增学生的表单对象
  const showModal = () => {
    setUpdate(porps.location.state.row);
    console.log(porps.location.state.row)
    setVisible(true);
    addStudent.setFieldsValue(null);
  };
  const modelOnOk = async () => {
    const datas = await addStudent.validateFields();
    console.log(datas);
    const result: any = await request.post('/class/addStudent', {
      ...datas,
      id: porps.location.state.row.id,
    });
    if (result.code == '200') {
      message.success(result.message);
      loadData(null, 1, pagination.pageSize).finally();
    } else {
      message.error(result.message); //弹出错误信息
      loadData(null, 1, pagination.pageSize).finally();
    }
    setVisible(false);
  };
  const modelOnCancel = () => {
    setVisible(false);
  };

  //弹框（编辑）
  const [visible1, setVisible1] = React.useState<any>();
  const [rows, setRows] = React.useState<any>({
    className: '',
    collegesName: '',
    email: '',
    id: '',
    idNo: '',
    majorName: '',
    mobileNo: '',
    name: '',
    position: '',
    sex: '',
    studentId: '',
    teacherName: '',
    userNo: '',
    yearName: '',
  });
  const [changeStudent] = Form.useForm(); //获取编辑学生的表单对象

  const showModal1 = (row: any) => {
    console.log(change);
    setRows(porps.location.state.row);
    setChange(row);
    setVisible1(true);
    changeStudent.setFieldsValue(row);
  };
  const modelOnOk1 = async () => {
    const datas = await changeStudent.validateFields();
    console.log(rows.userNo);
    const result: any = await request.post('/class/updateStudetent', {
      ...datas,
      studentId: change.studentId,
    });
    console.log(result.code);
    if (result.code == '200') {
      message.success(result.message);
      loadData(null, 1, pagination.pageSize);
    } else {
      message.error(result.message); //弹出错误信息
      loadData(null, 1, pagination.pageSize).finally();
    }
    setVisible1(false);
  };
  const modelOnCancel1 = () => {
    setVisible1(false);
  };

  const [formObject] = Form.useForm(); //获取表单对象
  //分页
  const [pagination, setPagination] = React.useState({
    current: 1,
    total: 1,
    pageSize: 10,
    showSizeChanger: true,
    pageSizeOptions: ['10', '50', '200', '500'],
  });
  const pageOnChange = async (page: any) => {
    await loadData(formObject.getFieldsValue(), page.current, page.pageSize);
  };
  /*........................................................ */

  //数据展示及条件查询
  const [data, setData] = React.useState();
  const loadData = async (
    queryParams: any,
    pageValue: any,
    pageSizeValue: any,
  ) => {
    const datas = await formObject.validateFields();
    const result: any = await request.post('/class/selectStudetent', {
      ...datas,
      ...queryParams,
      page: pageValue,
      number: pageSizeValue,
      id: porps.location.state.row.id,
    });
    console.log(result);
    if (result.date.returnDate) {
      const newData = result.date.returnDate.map((d: any, index: any) => {
        return {
          key: `k_${index}`,
          ...d,
        };
      });
      setPagination({
        ...pagination,
        current: pageValue,
        pageSize: pageSizeValue,
        total: result.totalCount,
      });
      setData(newData);
    } else {
      alert('该班级暂无学生');
    }
  };

  //重置
  const onReset = () => {
    formObject.resetFields();
    loadData(null, 1, pagination.pageSize);
  };
  React.useEffect(() => {
    loadData(null, 1, pagination.pageSize).finally();
  }, []);

  return (
    <div className={style.box2}>
      <Form name="selectForm" form={formObject} preserve={false}>
        <div>
          <div style={{ clear: 'both' }}>
            <Form.Item
              name="name"
              label="学员姓名"
              style={{ float: 'left' }}
              className={All_style.formItem}
            >
              <Input placeholder="请录入"></Input>
            </Form.Item>
            <Form.Item
              name="userNo"
              label="学&nbsp;&nbsp;&nbsp;号"
              style={{ float: 'left', marginLeft: 30 }}
              className={All_style.formItem}
            >
              <Input placeholder="请录入"></Input>
            </Form.Item>

            <Form.Item
              name="idNo"
              label="身份证号码："
              style={{ float: 'left', marginLeft: 30 }}
              className={All_style.formItem}
            >
              <Input placeholder="请录入"></Input>
            </Form.Item>

            <Form.Item
              name="sex"
              label="性别"
              style={{ float: 'left', marginLeft: 30 }}
              className={All_style.formItem}
            >
              <Select placeholder="请选择" className={All_style.select}>
                <Option value="1">男</Option>
                <Option value="0">女</Option>
              </Select>
            </Form.Item>
          </div>

          <div style={{ clear: 'both' }}>
            <Form.Item
              name="email"
              label="邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱"
              style={{ float: 'left' }}
              className={All_style.formItem}
            >
              <Input placeholder="请录入" className={All_style.select} />
            </Form.Item>

            <Form.Item
              name="mobileNo"
              label="手机号"
              style={{ float: 'left', marginLeft: 30 }}
              className={All_style.formItem}
            >
              <Input placeholder="请录入" className={All_style.select} />
            </Form.Item>

            <Form.Item
              name="position"
              label="项&nbsp;目&nbsp;角&nbsp;色&nbsp;"
              style={{ float: 'left', marginLeft: 30 }}
              className={All_style.formItem}
            >
              <Select placeholder="请选择" className={All_style.select}>
                <Option value="1">前端开发</Option>
                <Option value="2">测试</Option>
                <Option value="3">后端开发</Option>
                <Option value="4">项目经理</Option>
                <Option value="5">产品经理</Option>
                <Option value="6">UI</Option>
              </Select>
            </Form.Item>
          </div>

          <Button
            className={All_style.button}
            style={{ marginLeft: 30 }}
            onClick={() => {
              loadData(null, 1, pagination.pageSize).finally();
            }}
          >
            查询
          </Button>
          <Button className={All_style.button2} onClick={onReset}>
            重置
          </Button>
        </div>
      </Form>

      <div style={{ clear: 'both' }}>
        <Button type="primary" onClick={showModal} className={All_style.button}>
          +新增学生
        </Button>

        <Modal
          destroyOnClose
          maskClosable={false} //清除弹框内容
          title="新增学生"
          width={1250}
          visible={visible}
          onOk={modelOnOk}
          onCancel={modelOnCancel}
          okText="确认"
          cancelText="取消"
        >
          <Descriptions title="个人信息">
            <Descriptions.Item label="院系">{update.collegesName}</Descriptions.Item>
            <Descriptions.Item label="专业">{update.majorName}</Descriptions.Item>
            <Descriptions.Item label="年级">{update.yearName}</Descriptions.Item>
            <Descriptions.Item label="班级">{update.className}</Descriptions.Item>
            <Descriptions.Item label="班主任">{update.teacherName}</Descriptions.Item>
          </Descriptions>
          <Form
            name="AddClassForm"
            form={addStudent}
            preserve={false}
            // initialValues={change}
          >
            <div style={{ clear: 'both' }}>
              <Form.Item
                name="name"
                label="学&nbsp;员&nbsp;姓&nbsp;名&nbsp;"
                rules={[
                  {
                    required: true,
                    whitespace: true,
                    message: '学员姓名不能为空!',
                  },
                ]}
                style={{ float: 'left' }}
                className={All_style.formItem}
              >
                <Input placeholder="请录入"></Input>
              </Form.Item>
              <Form.Item
                name="userNo"
                label="学号"
                rules={[
                  {
                    required: true,
                    whitespace: true,
                    message: '学号不能为空!!',
                  },
                ]}
                style={{ float: 'left', marginLeft: 50 }}
                className={All_style.formItem}
              >
                <Input
                  placeholder="请录入"
                  className={All_style.select}
                ></Input>
              </Form.Item>

              <Form.Item
                name="sex"
                label="性&nbsp;&nbsp;&nbsp;别"
                rules={[
                  { required: true, whitespace: true, message: '请选择性别!' },
                ]}
                style={{ float: 'left', marginLeft: 50 }}
                className={All_style.formItem}
              >
                <Select placeholder="请选择" className={All_style.select}>
                  <Option value="1">男</Option>
                  <Option value="0">女</Option>
                </Select>
              </Form.Item>
            </div>

            <div style={{ clear: 'both' }}>
              <Form.Item
                name="idNo"
                label="身份证号码"
                rules={[
                  { required: true, message: '身份证号码不能为空!!' },
                  { min: 18, message: '格式不正确' },
                  { max: 18, message: '格式不正确' },
                ]}
                style={{ float: 'left' }}
                className={All_style.formItem}
              >
                <Input
                  placeholder="请录入"
                  className={All_style.select}
                ></Input>
              </Form.Item>

              <Form.Item
                name="email"
                label="邮箱"
                rules={[{ required: true, message: '邮箱不能为空!' }]}
                style={{ float: 'left', marginLeft: 50 }}
                className={All_style.formItem}
              >
                <Input
                  placeholder="请录入"
                  className={All_style.select}
                ></Input>
              </Form.Item>

              <Form.Item
                name="mobileNo"
                label="手机号"
                rules={[{ required: true, message: '手机号不能为空!' }]}
                style={{ float: 'left', marginLeft: 50 }}
                className={All_style.formItem}
              >
                <Input
                  placeholder="请录入"
                  className={All_style.select}
                ></Input>
              </Form.Item>
            </div>

            <div style={{ clear: 'both' }}>
              <Form.Item
                name="position"
                label="项&nbsp;目&nbsp;角&nbsp;色&nbsp;"
                rules={[{ required: true, message: '项目角色不能为空!' }]}
                style={{ float: 'left' }}
                className={All_style.formItem}
              >
                <Select placeholder="请选择" className={All_style.select}>
                  <Option value="1">前端开发</Option>
                  <Option value="2">测试</Option>
                  <Option value="3">后端开发</Option>
                  <Option value="4">项目经理</Option>
                  <Option value="5">产品经理</Option>
                  <Option value="6">UI</Option>
                </Select>
              </Form.Item>
            </div>
            <div style={{ clear: 'both' }}></div>
          </Form>
        </Modal>

        {/* 编辑弹框 */}
        <Modal
          title="学员信息维护"
          maskClosable={false} //清除弹框内容
          width={1250}
          visible={visible1}
          onOk={modelOnOk1}
          onCancel={modelOnCancel1}
          okText="确认"
          cancelText="取消"
        >
          <Descriptions title="个人信息">
            <Descriptions.Item label="院系">
              {rows.collegesName}
            </Descriptions.Item>
            <Descriptions.Item label="专业">{rows.majorName}</Descriptions.Item>
            <Descriptions.Item label="年级">{rows.yearName}</Descriptions.Item>
            <Descriptions.Item label="班级">{rows.className}</Descriptions.Item>
            <Descriptions.Item label="班主任">
              {rows.teacherName}
            </Descriptions.Item>
          </Descriptions>
          <Form
            name="AddClassForm"
            form={changeStudent}
            preserve={false}
            initialValues={change}
          >
            <div style={{ clear: 'both' }}>
              <Form.Item
                name="name"
                label="学&nbsp;员&nbsp;姓&nbsp;名&nbsp;"
                rules={[
                  {
                    required: true,
                    whitespace: true,
                    message: '学员姓名不能为空!',
                  },
                ]}
                style={{ float: 'left' }}
                className={All_style.formItem}
              >
                <Input placeholder="请录入"></Input>
              </Form.Item>

              <Form.Item
                name="userNo"
                label="学号"
                rules={[
                  {
                    required: true,
                    whitespace: true,
                    message: '学号不能为空!!',
                  },
                ]}
                style={{ float: 'left', marginLeft: 50 }}
                className={All_style.formItem}
              >
                <Input placeholder="请录入"></Input>
              </Form.Item>

              <Form.Item
                name="sex"
                label="性&nbsp;&nbsp;&nbsp;别"
                rules={[
                  { required: true, whitespace: true, message: '请选择性别!' },
                ]}
                style={{ float: 'left', marginLeft: 50 }}
                className={All_style.formItem}
              >
                <Select placeholder="请选择" className={All_style.select}>
                  <Option value="1">男</Option>
                  <Option value="0">女</Option>
                </Select>
              </Form.Item>
            </div>

            <div style={{ clear: 'both' }}>
              <Form.Item
                name="idNo"
                label="身份证号码"
                rules={[
                  { required: true, message: '身份证号码不能为空!!' },
                  { min: 18, message: '格式不正确' },
                  { max: 18, message: '格式不正确' },
                ]}
                style={{ float: 'left' }}
                className={All_style.formItem}
              >
                <Input placeholder="请录入"></Input>
              </Form.Item>
              <Form.Item
                name="email"
                label="邮箱"
                rules={[{ required: true, message: '邮箱不能为空!' }]}
                style={{ float: 'left', marginLeft: 50 }}
                className={All_style.formItem}
              >
                <Input placeholder="请录入"></Input>
              </Form.Item>
              <Form.Item
                name="mobileNo"
                label="手机号"
                rules={[{ required: true, message: '手机号不能为空!' }]}
                style={{ float: 'left', marginLeft: 50 }}
                className={All_style.formItem}
              >
                <Input placeholder="请录入"></Input>
              </Form.Item>
            </div>

            <div style={{ clear: 'both' }}>
              <Form.Item
                name="position"
                label="项&nbsp;目&nbsp;角&nbsp;色&nbsp;"
                rules={[{ required: true, message: '项目角色不能为空!' }]}
                style={{ float: 'left' }}
                className={All_style.formItem}
              >
                <Select placeholder="请选择" className={All_style.select}>
                  <Option value="1">前端开发</Option>
                  <Option value="2">测试</Option>
                  <Option value="3">后端开发</Option>
                  <Option value="4">项目经理</Option>
                  <Option value="5">产品经理</Option>
                  <Option value="6">UI</Option>
                </Select>
              </Form.Item>
            </div>
            <div style={{ clear: 'both' }}></div>
          </Form>
        </Modal>

        <Radio.Group
          onChange={({ target: { value } }) => {
            setSelectionType(value);
          }}
          value={selectionType}
        ></Radio.Group>

        <Table
          columns={columns}
          dataSource={data}
          className={style.table2}
          pagination={pagination}
          onChange={pageOnChange}
          tableLayout="fixed"
          bordered
        />
      </div>
    </div>
  );
};

export default AllStudents;
